<template>
	<view v-if="show" class="uni-noticebar" :style="{ backgroundColor: backgroundColor }" @click="onClick">
		<uni-icons v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon" type="sound"
			:color="color" size="22" />
		<view ref="textBox" class="uni-noticebar__content-wrapper"
			:class="{'uni-noticebar__content-wrapper--scrollable':scrollable, 'uni-noticebar__content-wrapper--single':!scrollable && (single || moreText)}">
			<view :id="elIdBox" class="uni-noticebar__content"
				:class="{'uni-noticebar__content--scrollable':scrollable, 'uni-noticebar__content--single':!scrollable && (single || moreText)}">
				<text :id="elId" ref="animationEle" class="uni-noticebar__content-text"
					:class="{'uni-noticebar__content-text--scrollable':scrollable,'uni-noticebar__content-text--single':!scrollable && (single || showGetMore)}"
					:style="{color:color, width:wrapWidth+'px', 'animationDuration': animationDuration, '-webkit-animationDuration': animationDuration ,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}">{{text}}</text>
			</view>
		</view>
		<view v-if="showGetMore === true || showGetMore === 'true'" class="uni-noticebar__more uni-cursor-point"
			@click="clickMore">
			<text v-if="moreText.length > 0" :style="{ color: moreColor }" class="uni-noticebar__more-text">{{ moreText }}</text>
			<uni-icons v-else type="right" :color="moreColor" size="16" />
		</view>
		<view class="uni-noticebar-close uni-cursor-point" v-if="(showClose === true || showClose === 'true') && (showGetMore === false || showGetMore === 'false')">
			<uni-icons
				type="closeempty" :color="color" size="16" @click="close" />
		</view>
	</view>
</template>

<script>
// #ifdef APP-NVUE
const dom = weex.requireModule('dom')
const animation = weex.requireModule('animation')
// #endif

/**
	 * NoticeBar 自定义导航栏
	 * @description 通告栏组件
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=30
	 * @property {Number} speed 文字滚动的速度，默认100px/秒
	 * @property {String} text 显示文字
	 * @property {String} backgroundColor 背景颜色
	 * @property {String} color 文字颜色
	 * @property {String} moreColor 查看更多文字的颜色
	 * @property {String} moreText 设置“查看更多”的文本
	 * @property {Boolean} single = [true|false] 是否单行
	 * @property {Boolean} scrollable = [true|false] 是否滚动，为true时，NoticeBar为单行
	 * @property {Boolean} showIcon = [true|false] 是否显示左侧喇叭图标
	 * @property {Boolean} showClose = [true|false] 是否显示左侧关闭按钮
	 * @property {Boolean} showGetMore = [true|false] 是否显示右侧查看更多图标，为true时，NoticeBar为单行
	 * @event {Function} click 点击 NoticeBar 触发事件
	 * @event {Function} close 关闭 NoticeBar 触发事件
	 * @event {Function} getmore 点击”查看更多“时触发事件
	 */

export default {
  name: 'UniNoticeBar',
  emits: ['click', 'getmore', 'close'],
  props: {
    text: {
      type: String,
      default: ''
    },
    moreText: {
      type: String,
      default: ''
    },
    backgroundColor: {
      type: String,
      default: '#FFF9EA'
    },
    speed: {
      // 默认1s滚动100px
      type: Number,
      default: 100
    },
    color: {
      type: String,
      default: '#FF9A43'
    },
    moreColor: {
      type: String,
      default: '#FF9A43'
    },
    single: {
      // 是否单行
      type: [Boolean, String],
      default: false
    },
    scrollable: {
      // 是否滚动，添加后控制单行效果取消
      type: [Boolean, String],
      default: false
    },
    showIcon: {
      // 是否显示左侧icon
      type: [Boolean, String],
      default: false
    },
    showGetMore: {
      // 是否显示右侧查看更多
      type: [Boolean, String],
      default: false
    },
    showClose: {
      // 是否显示左侧关闭按钮
      type: [Boolean, String],
      default: false
    }
  },
  data () {
    const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
    const elIdBox = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
    return {
      textWidth: 0,
      boxWidth: 0,
      wrapWidth: '',
      webviewHide: false,
      // #ifdef APP-NVUE
      stopAnimation: false,
      // #endif
      elId,
      elIdBox,
      show: true,
      animationDuration: 'none',
      animationPlayState: 'paused',
      animationDelay: '0s'
    }
  },
  mounted () {
    // #ifdef APP-PLUS
    const pages = getCurrentPages()
    const page = pages[pages.length - 1]
    const currentWebview = page.$getAppWebview()
    currentWebview.addEventListener('hide', () => {
      this.webviewHide = true
    })
    currentWebview.addEventListener('show', () => {
      this.webviewHide = false
    })
    // #endif
    this.$nextTick(() => {
      this.initSize()
    })
  },
  // #ifdef APP-NVUE
  beforeUnmount () {
    this.stopAnimation = true
  },
  // #endif
  methods: {
    initSize () {
      if (this.scrollable) {
        // #ifndef APP-NVUE
        const query = []
        const boxWidth = 0
        const textWidth = 0
        const textQuery = new Promise((resolve, reject) => {
          uni.createSelectorQuery()
          // #ifndef MP-ALIPAY
            .in(this)
          // #endif
            .select(`#${this.elId}`)
            .boundingClientRect()
            .exec(ret => {
              this.textWidth = ret[0].width
              resolve()
            })
        })
        const boxQuery = new Promise((resolve, reject) => {
          uni.createSelectorQuery()
          // #ifndef MP-ALIPAY
            .in(this)
          // #endif
            .select(`#${this.elIdBox}`)
            .boundingClientRect()
            .exec(ret => {
              this.boxWidth = ret[0].width
              resolve()
            })
        })
        query.push(textQuery)
        query.push(boxQuery)
        Promise.all(query).then(() => {
          this.animationDuration = `${this.textWidth / this.speed}s`
          this.animationDelay = `-${this.boxWidth / this.speed}s`
          setTimeout(() => {
            this.animationPlayState = 'running'
          }, 1000)
        })
        // #endif
        // #ifdef APP-NVUE
        dom.getComponentRect(this.$refs.animationEle, (res) => {
          const winWidth = uni.getSystemInfoSync().windowWidth
          this.textWidth = res.size.width
          animation.transition(this.$refs.animationEle, {
            styles: {
              transform: `translateX(-${winWidth}px)`
            },
            duration: 0,
            timingFunction: 'linear',
            delay: 0
          }, () => {
            if (!this.stopAnimation) {
              animation.transition(this.$refs.animationEle, {
                styles: {
                  transform: `translateX(-${this.textWidth}px)`
                },
                timingFunction: 'linear',
                duration: (this.textWidth - winWidth) / this.speed * 1000,
                delay: 1000
              }, () => {
                if (!this.stopAnimation) {
                  this.loopAnimation()
                }
              })
            }
          })
        })
        // #endif
      }
      // #ifdef APP-NVUE
      if (!this.scrollable && (this.single || this.moreText)) {
        dom.getComponentRect(this.$refs.textBox, (res) => {
          this.wrapWidth = res.size.width
        })
      }
      // #endif
    },
    loopAnimation () {
      // #ifdef APP-NVUE
      animation.transition(this.$refs.animationEle, {
        styles: {
          transform: 'translateX(0px)'
        },
        duration: 0
      }, () => {
        if (!this.stopAnimation) {
          animation.transition(this.$refs.animationEle, {
            styles: {
              transform: `translateX(-${this.textWidth}px)`
            },
            duration: this.textWidth / this.speed * 1000,
            timingFunction: 'linear',
            delay: 0
          }, () => {
            if (!this.stopAnimation) {
              this.loopAnimation()
            }
          })
        }
      })
      // #endif
    },
    clickMore () {
      this.$emit('getmore')
    },
    close () {
      this.show = false
      this.$emit('close')
    },
    onClick () {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
	.uni-noticebar {
		/* #ifndef APP-NVUE */
		display: flex;
		width: 100%;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		align-items: center;
		padding: 10px 12px;
		margin-bottom: 10px;
	}

	.uni-cursor-point {
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	.uni-noticebar-close {
		margin-left: 8px;
		margin-right: 5px;
	}

	.uni-noticebar-icon {
		margin-right: 5px;
	}

	.uni-noticebar__content-wrapper {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
	}

	.uni-noticebar__content-wrapper--single {
		/* #ifndef APP-NVUE */
		line-height: 18px;
		/* #endif */
	}

	.uni-noticebar__content-wrapper--single,
	.uni-noticebar__content-wrapper--scrollable {
		flex-direction: row;
	}

	/* #ifndef APP-NVUE */
	.uni-noticebar__content-wrapper--scrollable {
		position: relative;
		height: 18px;
	}

	/* #endif */

	.uni-noticebar__content--scrollable {
		/* #ifdef APP-NVUE */
		flex: 0;
		/* #endif */
		/* #ifndef APP-NVUE */
		flex: 1;
		display: block;
		overflow: hidden;
		/* #endif */
	}

	.uni-noticebar__content--single {
		/* #ifndef APP-NVUE */
		display: flex;
		flex: none;
		width: 100%;
		justify-content: center;
		/* #endif */
	}

	.uni-noticebar__content-text {
		font-size: 14px;
		line-height: 18px;
		/* #ifndef APP-NVUE */
		word-break: break-all;
		/* #endif */
	}

	.uni-noticebar__content-text--single {
		/* #ifdef APP-NVUE */
		lines: 1;
		/* #endif */
		/* #ifndef APP-NVUE */
		display: block;
		width: 100%;
		white-space: nowrap;
		/* #endif */
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.uni-noticebar__content-text--scrollable {
		/* #ifdef APP-NVUE */
		lines: 1;
		padding-left: 750rpx;
		/* #endif */
		/* #ifndef APP-NVUE */
		position: absolute;
		display: block;
		height: 18px;
		line-height: 18px;
		white-space: nowrap;
		padding-left: 100%;
		animation: notice 10s 0s linear infinite both;
		animation-play-state: paused;
		/* #endif */
	}

	.uni-noticebar__more {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		padding-left: 5px;
	}

	.uni-noticebar__more-text {
		font-size: 14px;
	}

	@keyframes notice {
		100% {
			transform: translate3d(-100%, 0, 0);
		}
	}
</style>
